<template>
    <div class="details">
        <Top text="商品详情"/>

        <img :src="DetailsDate.src" alt="" id="goods">


        <div class="goods-info">
            <div class="name">
                {{DetailsDate.goods_name + DetailsDate.specifications}}
            </div>
            <div class="wrap">
                <p class="price"><span>￥</span>{{DetailsDate.goods_price}}<span>/桶</span></p>
            </div>
        </div>

        <div class="goods-content">
            <div class="title">商品简介</div>

            <div class="info">
                <p> <span>规格：</span>{{DetailsDate.specifications}}</p>
                <p> <span>单位：</span>{{DetailsDate.company}}</p>
            </div>
            <div class="info">
                <p> <span>重量：</span>{{DetailsDate.weight}}</p>
                <p> <span>品牌：</span>{{DetailsDate.brand}}</p>
            </div>
        </div>

        <div id="car-wrap">
            <Car :shoppingCarList = 'shoppingCarList'/>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        name:"Details-View",
        data(){
            return {
                waterCount:1,
                isSend:false,
                _id: this.$route.query._id
            }
        },
        methods: {
            // 获取详情页数据
            getGoodsDetails(){
              this.$store.dispatch('Home/getGoodsDetails',this.$route.query._id)  
            },
            // 获取购物车数据
            searchGoodsIntheCar(){
                this.$store.dispatch('Home/searchGoodsIntheCar')
            },
        },
        created() {
            this.getGoodsDetails()
            this.searchGoodsIntheCar()
        },
        computed:{
            ...mapState('Home',['shoppingCarList','DetailsDate'])
        },
    }
</script>

<style scoped lang="less">
    .details{
        width: 100%;
        background: #F5F7F9;

        .top{
            width: 95%;
            margin: 0 auto;
            display: flex;
            height: 10.7vw;
            align-items: center;
            background: #fff;
            padding-bottom: 1.3vw;

            img{
                width: 5.3vw;
                height: 5.3vw;
            }
            p{
                text-align: center;
                width: 88%;
                font-size: 3.7vw;
                color: #333;
                font-weight: 600;
            }
        }
    
        #goods{
            display: block;
            width: 100%;
            height: 80vw;
        }

        .goods-info{
            padding: 2.7vw 0;
            width: 95%;
            margin: 0 auto;
            background: #fff;
            margin-bottom: 6.7vw;
            
            .name{
                font-size: 4.3vw;
                font-weight: 1000;
                letter-spacing: 0.3vw;
                padding: 1.3vw 0;
            }

            .wrap{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 8vw;

                .price{
                    color: #CD282C;
                    font-weight: 1000;
                    font-size: 5.3vw;
                    letter-spacing: 0.3vw;
                    span{
                        font-size: 3.2vw;
                    }
                }
            }

            .count{
                display: flex;
                align-items: center;

                img{
                    width: 5.3vw ;
                    height: 5.3vw;
                }

                span{
                    font-size: 5.3vw;
                    font-weight: 1000;
                    color: #333;
                    margin: 0 2.1vw;
                }
            }
        }

        .goods-content{
            background: #fff;
            width: 95%;
            margin: 0 auto;

            .title{
                font-size: 16px;
                font-weight: 1000;
                padding: 8px 0;
            }

            .info{
                display: flex;
                justify-content: space-between;
                padding: 5px 0;
                color: #333;
                p{
                    width: 50%;
                }
                span{
                    color: #9D9D9D;
                }
            }
        }
    }
</style>